<template>
  <div>
    <hr class="hr">
    <h2 style="text-align: left;margin-left:3.5%; ">已有警报规则</h2>
    <el-table :data="alertList" max-height="350px" border style="width: 95%;box-sizing: border-box;margin: 0 20px;">

      <el-table-column type="index" width="50" />

      <el-table-column label="警报名" prop="alertname" width="70" />

      <!-- <el-table-column label="metric" prop="metric" width="70" /> -->

      <el-table-column label="检测时段" prop="duration" width="80" />
      <el-table-column label="检测间隔" prop="interval" width="80" />
      <!-- <el-table-column label="time" prop="time" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ formatTimeF(scope.row.time) }}</span>
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="maximum" prop="maximum" width="50" /> -->
      <!-- <el-table-column label="minimum" prop="minimum" width="50" /> -->
      <!-- <el-table-column label="equal" prop="equal" width="50" /> -->

      <!-- <el-table-column label="CheckAPI" prop="CheckAPI" /> -->
      <el-table-column label="描述" prop="description" />
      <el-table-column label="提示信息" prop="content" />
      <el-table-column label="条件" prop="condition">
        <!-- <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除
          </el-button>
        </template> -->
      </el-table-column>
      <el-table-column label="修改" width="80">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleModify(scope.$index, scope.row)"
          >修改
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="删除" width="80">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>

// import { getAlertList, deleteAlert } from '@/api/Alert.js'
import { formatTime } from '@/utils/util.js'
// import axios from 'axios'
import axiosservice from '@/utils/CommonData.js'

export default {
  name: 'ShowAlert',
  components: {},
  data() {
    return {
      alertList: []
    }
  },
  mounted() {
    this.getAlertList()
  },
  methods: {
    getAlertList() {
      axiosservice.get('/getallalert')
        .then((res) => {
          if (res.status == 200) {
            console.log('getallalert', res.data.data)// res.data是获取到的json数据
            this.alertList = res.data.data
          }
        })
        .catch((error) => {
          console.log(error)
          this.$message.error('获取警报数据失败!')
        })
    },
    deleteAlert(alertname) {
      axiosservice.get('/dropalert?alertname=' + alertname)
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 200) {
              this.$emit('deleteAlert')
              this.getAlertList()
              console.log('删除警报成功')
              this.$message('删除警报成功!')
            } else {
              console.log('删除警报失败' + res.data.code)
              this.$message.error('删除警报失败!')
            }
          }
        })
        .catch((error) => {
          console.log(error)
          this.$message.error('删除警报失败!')
        })
    },
    formatTimeF(str) {
      return formatTime(parseInt(str))
    },

    handleDelete(index, data) {
      this.deleteAlert(data.alertname)
      console.log(index, data)
    },
    handleModify(index, data) {
      this.$emit('showDialog', data)
      console.log(index, data)
    }

  }
}
</script>

<style scoped>

</style>
